<template>
  <div class="good-list-outer-outer">
    <a-row justify="space-between" align="top">
      <div>
        <!--      <a-col :xs="24" :md="24" :lg="0">-->
        <!--        <basic-button @click="showSelectionDrawerState=true" inverseColor="true">展示筛选栏</basic-button>-->
        <!--        <a-drawer-->
        <!--            title="Basic Drawer"-->
        <!--            placement="right"-->
        <!--            width="100vw"-->
        <!--            :closable="true"-->
        <!--            v-model:visible="showSelectionDrawerState"-->
        <!--            :after-visible-change="afterShowSelectionDrawerStateChange"-->
        <!--        >-->
        <!--          <div style="padding-bottom: 60px ">-->
        <!--            <basic-collapse :original-selection="1" @change="changeItemSelection" style="padding: 0">-->
        <!--              <basic-collapse-item  v-model:selectionIndex="itemSelectionIndex" title="商品大小" v-for="i in 10">-->
        <!--                <basic-input v-for="j in 8"></basic-input>-->
        <!--              </basic-collapse-item>-->
        <!--            </basic-collapse>-->
        <!--          </div>-->
        <!--          <div style="position:fixed;height: 60px;bottom: 0;right: 0;left: 0;z-index: 9999;background-color: white">-->
        <!--            <div style="display: flex;flex-direction: row;justify-content:space-around;align-items: center;height: 100%;width: 100%">-->
        <!--              <basic-button>111111111111</basic-button>-->
        <!--            </div>-->
        <!--          </div>-->
        <!--        </a-drawer>-->
        <!--      </a-col>-->
        <!--      <a-col :xs="0" :md="0" :lg="6">-->
        <!--        <basic-card style="width: 100%" :hoverMove="false" :hovered="true" :radius="false" :padding="true">-->
        <!--          <basic-collapse :original-selection="1" @change="changeItemSelection">-->
        <!--            <basic-collapse-item  v-model:selectionIndex="itemSelectionIndex" title="adad" v-for="i in 10">-->
        <!--              <basic-input v-for="j in 8"></basic-input>-->
        <!--            </basic-collapse-item>-->
        <!--          </basic-collapse>-->
        <!--        </basic-card>-->
        <!--      </a-col>-->
        <!--      :md="24" :lg="18"-->
      </div>

      <a-col :span="24">
        <div style="display: flex;flex-direction: column;align-items: stretch;">
          <table>
            <tbody>
            <tr>
              <td style="vertical-align: top;white-space: nowrap;width: 100px">
                <div class="good-list-font" style="display: inline-block;margin-right: 10px">
                  Order status
                </div>
              </td>
              <td>
                <div>
                  <a-radio-group name="state" @change="selectState" :defaultValue="null">
                    <a-radio :value="null">
                      <div class="good-list-font">
                        All
                      </div>
                    </a-radio>
                    <a-radio v-for="val in states" :value="val.state">
                      <div class="good-list-font">
                        {{ val.title }}
                      </div>
                    </a-radio>
                  </a-radio-group>
                </div>
              </td>
            </tr>
            </tbody>
          </table>
          <!--            <div style="display: inline-block;text-align: center;flex: 0 0 auto;margin-right: 10px">-->
          <!--              <div class="good-list-font">-->
          <!--                一级类型-->
          <!--              </div>-->
          <!--            </div>-->
          <!--            <div style="display: inline-block;flex: 1 1 auto">-->
          <!--              <a-radio-group name="primary_type" v-model:value="state.primary_type" @change="select1">-->
          <!--                <a-radio :value="null">-->
          <!--                  <div class="good-list-font">-->
          <!--                    All-->
          <!--                  </div>-->
          <!--                </a-radio>-->
          <!--                <a-radio v-for="primaryType in primaryTypeList" :value="primaryType">-->
          <!--                  <div class="good-list-font">-->
          <!--                    {{ primaryType.type }}-->
          <!--                  </div>-->
          <!--                </a-radio>-->
          <!--              </a-radio-group>-->
          <!--            </div>-->
          <!--          <div v-if="secondaryTypeList!=null&&secondaryTypeList.length>0" style="display: flex;flex-direction: row;align-items: flex-start;justify-content: flex-start;flex-wrap: nowrap;">-->
          <!--            <div style="display: inline-block;text-align: center;flex: 0 0 auto;margin-right: 10px">-->
          <!--              <div class="good-list-font">-->
          <!--                二级类型-->
          <!--              </div>-->
          <!--            </div>-->
          <!--            <div style="display: inline-block;flex: 1 1 auto">-->
          <!--              <a-radio-group name="secondary_type" @change="select2" v-model:value="state.secondary_type">-->
          <!--                <a-radio :value="null">-->
          <!--                  <div class="good-list-font">-->
          <!--                    All-->
          <!--                  </div>-->
          <!--                </a-radio>-->
          <!--                <a-radio v-for="secondaryType in secondaryTypeList" :value="secondaryType">-->
          <!--                  <div class="good-list-font">-->
          <!--                    {{ secondaryType.type }}-->
          <!--                  </div>-->
          <!--                </a-radio>-->
          <!--              </a-radio-group>-->
          <!--            </div>-->
          <!--          </div>-->
          <!--          <div v-if="tertiaryTypeList!=null&&tertiaryTypeList.length>0" style="display: flex;flex-direction: row;align-items: flex-start;justify-content: flex-start;flex-wrap: nowrap;">-->
          <!--            <div style="display: inline-block;text-align: center;flex: 0 0 auto;margin-right: 10px">-->
          <!--              <div class="good-list-font">-->
          <!--                三级类型-->
          <!--              </div>-->
          <!--            </div>-->
          <!--            <div style="display: inline-block;flex: 1 1 auto">-->
          <!--              <a-radio-group name="tertiary_type" v-model:value="state.tertiary_type" @change="select3">-->
          <!--                <a-radio :value="null">-->
          <!--                  <div class="good-list-font">-->
          <!--                    All-->
          <!--                  </div>-->
          <!--                </a-radio>-->
          <!--                <a-radio v-for="tertiaryType in tertiaryTypeList" :value="tertiaryType">-->
          <!--                  <div class="good-list-font">-->
          <!--                    {{ tertiaryType.type }}-->
          <!--                  </div>-->
          <!--                </a-radio>-->
          <!--              </a-radio-group>-->
          <!--            </div>-->
          <!--          </div>-->
        </div>
        <!--        <a-form>-->
        <!--          <a-form-item>-->
        <!--            <template #label>-->
        <!--              <div class="good-list-font">-->
        <!--                一级类型-->
        <!--              </div>-->
        <!--            </template>-->
        <!--            <a-radio-group name="primary_type" v-model:value="state.primary_type" @change="select1">-->
        <!--              <a-radio :value="null">-->
        <!--                <div class="good-list-font">-->
        <!--                  All-->
        <!--                </div>-->
        <!--              </a-radio>-->
        <!--              <a-radio v-for="primaryType in primaryTypeList" :value="primaryType">-->
        <!--                <div class="good-list-font">-->
        <!--                  {{ primaryType.type }}-->
        <!--                </div>-->
        <!--              </a-radio>-->
        <!--            </a-radio-group>-->
        <!--          </a-form-item>-->
        <!--          <a-form-item v-if="secondaryTypeList!=null&&secondaryTypeList.length>0">-->
        <!--            <template #label>-->
        <!--              <div class="good-list-font">-->
        <!--                二级类型-->
        <!--              </div>-->
        <!--            </template>-->
        <!--            <a-radio-group name="secondary_type" @change="select2" v-model:value="state.secondary_type">-->
        <!--              <a-radio :value="null">-->
        <!--                <div class="good-list-font">-->
        <!--                  All-->
        <!--                </div>-->
        <!--              </a-radio>-->
        <!--              <a-radio v-for="secondaryType in secondaryTypeList" :value="secondaryType">-->
        <!--                <div class="good-list-font">-->
        <!--                  {{ secondaryType.type }}-->
        <!--                </div>-->
        <!--              </a-radio>-->
        <!--            </a-radio-group>-->
        <!--          </a-form-item>-->
        <!--          <a-form-item v-if="tertiaryTypeList!=null&&tertiaryTypeList.length>0">-->
        <!--            <template #label>-->
        <!--              <div class="good-list-font">-->
        <!--                三级类型-->
        <!--              </div>-->
        <!--            </template>-->
        <!--            <a-radio-group name="tertiary_type" v-model:value="state.tertiary_type" @change="select3">-->
        <!--              <a-radio :value="null">-->
        <!--                <div class="good-list-font">-->
        <!--                  All-->
        <!--                </div>-->
        <!--              </a-radio>-->
        <!--              <a-radio v-for="tertiaryType in tertiaryTypeList" :value="tertiaryType">-->
        <!--                <div class="good-list-font">-->
        <!--                  {{ tertiaryType.type }}-->
        <!--                </div>-->
        <!--              </a-radio>-->
        <!--            </a-radio-group>-->
        <!--          </a-form-item>-->
        <!--        </a-form>-->

        <hr/>
      </a-col>

      <a-col :span="24">
        <a-spin :spinning="state.isRefreshing" style="width: 100%" size="large">
          <div style="display: flex;flex-direction: column;align-items: stretch" v-if="state.orderList!=null&&state.orderList.length>0">
            <div class="his-order-list-outer-outer">
              <div v-for="order in state.orderList" style="padding: 5px 3px;" class="his-order-list-outer">
                <div style="display:flex;flex-direction:column;justify-content:stretch;border-radius: 5px;padding: 7px;background-color: #f0f0f0;">
                  <div style="display: flex;justify-content: space-between;align-items: center;flex-direction: row;flex-wrap: nowrap;">
                    <div>
                      No ：{{order.orderNumber}}
                    </div>
                    <div>
                      <basic-button under-line="false" @click="toRoute('/user/order/'+order.id)" style="border: #1677ff 1px solid;padding: 7px" >
                        <span>
                          <span class="his-order-list-outer">
                            View details
                          </span>
                        </span>

                      </basic-button>
                    </div>
                  </div>
                  <div style="font-size: 12px;color: #494949;">
                    <div>
                      Order status：{{states[order.state-1].title}}
                    </div>
                    <div>
                      Total price：${{order.totalPrice}}
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <div style="display: flex;justify-content: center;">
              <a-pagination
                  class="show-min-576px"
                  v-model:current="state.current"
                  :page-size-options="pageSizeOptions"
                  :total="state.total"
                  show-size-changer
                  :page-size="state.pageSize"
                  @showSizeChange="onShowSizeChange"
                  @change="onPageChange"
                  :defaultPageSize="10"
                  :show-total="(total, range) => `${range[0]}-${range[1]} of ${total} items`"
              >
                <template #buildOptionText="props">
                  <span>{{ props.value }}条/页 </span>
                </template>
              </a-pagination>
              <a-pagination
                  class="show-max-576px"
                  size="small"
                  v-model:current="state.current"
                  :page-size-options="pageSizeOptions"
                  :total="state.total"
                  show-size-changer
                  :page-size="state.pageSize"
                  @showSizeChange="onShowSizeChange"
                  @change="onPageChange"
                  :defaultPageSize="10"
              >
              </a-pagination>
            </div>
          </div>
          <div style="display: flex;flex-direction: column;align-items: center;" v-else>
            <a-empty :image="Empty.PRESENTED_IMAGE_DEFAULT">
              <template #description>
                <div class="good-list-font" imageStyle="">
                  The content you searched has no results
                </div>
              </template>
            </a-empty>
          </div>
        </a-spin>
      </a-col>
    </a-row>
  </div>
</template>

<script lang="ts">
import {defineComponent, ref, reactive, computed, watch, onMounted} from 'vue'
import {useStore} from 'vuex'
import {useRouter, useRoute} from 'vue-router'
import {searchGoodByType} from "../../../api/GoodRequest";
import {Empty, notification} from "ant-design-vue";
import {searchOrderByPage} from "../../../api/OrderActionRequest";
import BasicButton from "../../../components/button/basicButton.vue";

export default defineComponent({
  components: {BasicButton},
  setup(props, context) {
    const store = useStore();
    const router = useRouter();
    const route = useRoute();

    const searchDate = computed(() => {
      return {
        path: route.query,
        params: route.params
      }
    })

    const changeSearchRoot = (state = null) => {

      let newRoute = {
        name:route.name!,
        query:{
          state
        }
      }
      router.push(newRoute);
    }

    watch(() => route.query, () => {
      toSearchOrderByPage();
    })

    onMounted(() => {
      toSearchOrderByPage();
    })

    const activeKey = ref([]);

    const state = reactive({
      current: 1,
      pageSize: 10,
      total: 0,
      isRefreshing: false,
      orderList: []
    })

    const pageSizeOptions = ref(['10', '20', '30', '40', '50']);

    const states = [
      {
        title: 'To be paid',
        state: 1
      },
      {
        title: 'To be shipped',
        state: 2
      },
      {
        title: 'Shipped',
        state: 3
      },
      {
        title: 'Received goods',
        state: 4
      },
      {
        title: 'Cancelled',
        state: 5
      },
      {
        title: 'Reviewing refund',
        state: 6
      },
    ]

    const toSearchOrderByPage = async () => {
      if (state.isRefreshing) return;
      state.isRefreshing = true;

      // @ts-ignored
      await searchOrderByPage(route.query.state == null ? {
        current: state.current,
        size: state.pageSize,
      } : {
        state: route.query.state,
        current: state.current,
        size: state.pageSize,
      }).then((res) => {
        if (res.data.result != undefined) {
          if (res.data.result.current != null) state.current = res.data?.result?.current
          if (res.data.result.total != null) state.total = res.data?.result?.total
          if (res.data.result.size != null) state.pageSize = res.data?.result?.size
          //@ts-ignored
          if (res.data.result.records != null) state.orderList = res.data?.result?.records
        }
      }).catch((res) => {
        notification['success']({
          message: 'Action Success',
        });
      }).finally(()=>{
        state.isRefreshing = false;
      })
    }

    const onPageChange = async (val: number | string) => {
      if (typeof val === 'string') val = Number.parseInt(val)
      state.current = val;
      await toSearchOrderByPage();
    }

    const onShowSizeChange = async (current: number, pageSize: number | string) => {
      state.pageSize = typeof pageSize == 'number' ? pageSize : Number.parseInt(pageSize);
      await toSearchOrderByPage();
    };
    const selectState = (value: any) => {
      changeSearchRoot(value.target.value)
    }

    const toRoute=(path:string)=>{
      router.push({
        path
      })
    }

    //TODO 订单列表
    return {
      states,
      selectState,
      toRoute,
      onPageChange,
      onShowSizeChange,
      pageSizeOptions,
      changeSearchRoot,
      state,
      searchDate,
      activeKey,
      Empty
    }
  }
})
</script>

<style scoped lang="less">
.good-list-outer-outer {
  padding: 10px 70px;

  @media screen and (max-width: 1200px) {
    padding: 10px 30px;
  }
  @media screen and (max-width: 768px) {
    padding: 10px 10px;
  }
  @media screen and (max-width: 576px) {
    padding: 10px 5px;
  }
}

.good-list-font {
  display: inline-block;
  font-size: 20px;
  white-space: nowrap;
  line-height: 31.2px;
  @media screen and (max-width: 768px) {
    font-size: 17px;
    line-height: 24.8px;
  }
  @media screen and (max-width: 576px) {
    font-size: 14px;
    line-height: 25.6px;
  }

}

.ant-form-item {
  margin-bottom: 5px;
}


.show-max-576px {
  @media screen and (min-width: 576px) {
    display: none !important;
  }
}

.show-min-576px {
  @media screen and (max-width: 576px) {
    display: none !important;
  }
}
.his-order-list-outer-outer{
  display:flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: center;
  justify-content: flex-start;
  align-items: stretch;
}

.his-order-list-outer{
  flex: 0 0 33.3%;
  box-sizing: border-box;
  @media screen and (max-width: 1000px) {
    flex: 0 0 50%;
  }
  @media screen and (max-width: 768px) {
    font-size: 16px;
  }
  @media screen and (max-width: 650px) {
    font-size: 15px;
  }
  @media screen and (max-width: 600px) {
    font-size: 14px;
  }
  @media screen and (max-width: 550px) {
    font-size: 15px;
    flex: 0 0 100%;
  }
}

</style>
